<script setup>
import { ref, reactive, watchEffect, onMounted } from 'vue';
let firstName = ref("")
let lastName = reactive({
  name: ""
})
let fullName = ref("")
//默认监听当前所有的响应式数据，任何响应式数据发生改变都会执行其中的函数
watchEffect(() => {
  fullName.value = firstName.value + lastName.name
})

onMounted(() => {

})
</script>

<template>
  <div>
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName.name"><br>
    {{ fullName }}
  </div>
</template>

<style scoped>
th, td {
  width: 100px;
}

td {
  text-align: center;
}
</style>
